<template>
  <d2-container>
    <template slot="header">
      <el-form
        :inline="true"
        :model="queryForm"
        ref="queryForm"
        size="mini"
        style="margin-bottom: -18px;"
      >
        <el-form-item prop="type">
          <el-select v-model="queryForm.type" style="width: 100px;" @change="onTypeChange">
            <el-option label="已抄回" value="0" />
            <el-option label="未抄回" value="1" />
            <el-option label="查历史" value="2" />
          </el-select>
        </el-form-item>

        <el-form-item prop="searchType">
          <el-select v-model="queryForm.searchType" style="width: 100px;">
            <el-option label="全部" value="0" />
            <el-option label="客户名称" value="1" />
            <el-option label="客户编号" value="2" />
            <el-option label="记表地址" value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label prop="searchVal">
          <el-input v-model="queryForm.searchVal" placeholder="请输入" style="width: 200px;" />
        </el-form-item>
        <el-form-item label="查询日期" prop="beginDate" v-show="queryForm.type!='2'">
          <el-date-picker v-model="queryForm.beginDate" style="width: 140px;" />
        </el-form-item>
        <el-form-item label="查询日期" prop="dataRange" v-show="queryForm.type=='2'">
          <el-date-picker
            v-model="queryForm.dataRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleFormSubmit">
            <d2-icon name="search" />查询
          </el-button>
          <el-button type="primary" @click="exportReadMeter">
            <d2-icon name="download" />导出
          </el-button>
        </el-form-item>
      </el-form>
    </template>
    <split-pane :min-percent="10" :max-percent="20" :default-percent="20" split="vertical">
      <template slot="paneL">
        <my-area-tree @change="onAreaChange" />
      </template>
      <template slot="paneR">
        <d2-crud
          ref="d2Crud"
          :columns="queryForm.type == 1? columns2 : columns1"
          :data="data"
          :loading="loading"
          :pagination="pagination"
          @pagination-current-change="onPageChange"
        ></d2-crud>
      </template>
    </split-pane>
  </d2-container>
</template>

<script>
import MyAreaTree from "@/components/my-area-tree";
import dayjs from "dayjs";

export default {
  name: "meterReadingRecord",
  components: { MyAreaTree },
  data() {
    return {
      queryForm: {
        archivesAddress: "",
        areaId: "1",
        beginDate: dayjs().format("YYYY-MM-DD"),
        dataRange: [dayjs().format("YYYY-MM-DD"), dayjs().format("YYYY-MM-DD")],
        type: "0",
        searchType: "0",
        searchVal: ""
      },
      loading: false,
      pagination: {
        currentPage: 1,
        pageSize: 100,
        total: 0
      },
      columns1: [
        {
          title: "序号",
          key: "serialNum",
          width: "50px"
        },
        {
          title: "客户名称",
          key: "customerName",
          sortable: true
        },
        {
          title: "客户编号",
          key: "customerSerialnumber",
          sortable: true
        },
        {
          title: "表计地址",
          key: "serialnumber",
          sortable: true
        },
        {
          title: "上次抄表时间",
          key: "lastReadMeterTime",
          sortable: true,
          width: "150px"
        },
        {
          title: "上次读数",
          key: "lastReadingnum",
          sortable: true
        },
        {
          title: "本次抄表时间",
          key: "readMeterTime",
          sortable: true,
          width: "150px"
        },
        {
          title: "本次读数",
          key: "readingnum",
          sortable: true
        },
        {
          title: "用量",
          key: "dosage",
          sortable: true
        },
        {
          title: "阀状态",
          key: "valveState",
          sortable: true
        },
        {
          title: "电压值",
          key: "voltageValue",
          sortable: true
        }
      ],
      columns2: [
        {
          title: "序号",
          key: "serialNum",
          width: "50px"
        },
        {
          title: "客户名称",
          key: "customerName",
          sortable: true
        },
        {
          title: "客户编号",
          key: "customerSerialnumber",
          sortable: true
        },
        {
          title: "表计地址",
          key: "serialnumber",
          sortable: true
        },
        {
          title: "集中器",
          key: "measureEquipConcent",
          sortable: true
        },
        {
          title: "采集器",
          key: "measureEquipCollect",
          sortable: true
        },
        {
          title: "采集器通道",
          key: "collectChannel",
          sortable: true
        }
      ],
      data: []
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    onTypeChange() {
      this.fetchData();
    },
    onAreaChange(data, node) {
      this.queryForm.areaId = data.id;
      this.fetchData();
    },
    handleFormSubmit() {
      this.$refs.queryForm.validate(valid => {
        if (valid) {
          this.pagination.currentPage = 1;
          this.fetchData();
        } else {
          return false;
        }
      });
    },
    fetchData() {
      this.loading = true;
      this.$api
        .admin_readMeter_getReadMeterPageVO({
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          areaId: this.queryForm.areaId,
          type: this.queryForm.type,
          customerName:
            this.queryForm.searchType == 1 ? this.queryForm.searchVal : "",
          customerSerialnumber:
            this.queryForm.searchType == 2 ? this.queryForm.searchVal : "",
          archivesAddress:
            this.queryForm.searchType == 3 ? this.queryForm.searchVal : "",
          beginDate:
            this.queryForm.type != 2
              ? dayjs(new Date(this.queryForm.beginDate)).format("YYYY-MM-DD")
              : dayjs(new Date(this.queryForm.dataRange[0])).format(
                  "YYYY-MM-DD"
                ),
          endDate:
            this.queryForm.type != 2
              ? ""
              : dayjs(new Date(this.queryForm.dataRange[1])).format(
                  "YYYY-MM-DD"
                )
        })
        .then(res => {
          let columnsList = [];
          res.columns.forEach(element => {
            let columnsObj = {
              title: element.name,
              key: element.key,
              sortable: true
            };
            columnsList.push(columnsObj);
          });
          console.log(columnsList);
          this.columns = columnsList;
          this.data = res.data;
          this.pagination.total = res.total;
        })
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    onPageChange(currentPage) {
      this.pagination.currentPage = currentPage;
      this.fetchData();
    },
    exportReadMeter() {
      this.$api
        .admin_readMeter_exportReadMeterVO({
          areaId: this.queryForm.areaId,
          type: this.queryForm.type,
          customerName:
            this.queryForm.searchType == 0 || this.queryForm.searchType == 1
              ? this.queryForm.searchVal
              : "",
          customerSerialnumber:
            this.queryForm.searchType == 0 || this.queryForm.searchType == 2
              ? this.queryForm.searchVal
              : "",
          archivesAddress:
            this.queryForm.searchType == 0 || this.queryForm.searchType == 3
              ? this.queryForm.searchVal
              : "",
          beginDate:
            this.queryForm.type != 2
              ? dayjs(new Date(this.queryForm.beginDate)).format("YYYY-MM-DD")
              : dayjs(new Date(this.queryForm.dataRange[0])).format(
                  "YYYY-MM-DD"
                ),
          endDate:
            this.queryForm.type != 2
              ? ""
              : dayjs(new Date(this.queryForm.dataRange[1])).format(
                  "YYYY-MM-DD"
                )
        })
        .then(res => {})
        .catch(err => {
          console.log("err", err);
        })
        .finally(() => {});
    }
  }
};
</script>
